<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ZCOOL</title>
    <link rel="stylesheet" href="../css/swiper.min.css">
    <link rel="stylesheet" href="../css/ZCOOL.css">

</head>

<body>
    <div id="zcool">
        <div id="header">
            <div>
                <div class="logo">
                    <a href="https://www.zcool.com.cn/">
                        <img src="../images/logo.svg" alt="">
                    </a>
                </div>
                <ul class="nav">
                    <li>
                        <a href="###">首页</a>
                        
                    </li>
                    <li>
                        <a href="###">发现</a>
                        <div class="list-box">
                            <ul>
                                <li>
                                    <a href="###">平面</a>
                                    <i></i>
                                </li>
                                <li>
                                    <a href="###">UI</a>
                                    <i></i>
                                </li>
                                <li>
                                    <a href="###">网页</a>
                                    <i></i>
                                </li>
                                <li>
                                    <a href="###">插画</a>
                                    <i></i>
                                </li>
                                <li>
                                    <a href="###">动漫</a>
                                    <i></i>
                                </li>
                                <li>
                                    <a href="###">摄影</a>
                                    <i></i>
                                </li>
                                <li>
                                    <a href="###">空间</a>
                                </li>
                                <li>
                                    <a href="###">工业/产品</a>
                                    <i></i>
                                </li>
                                <li>
                                    <a href="###">三维</a>
                                    <i></i>
                                </li>
                                <li>
                                    <a href="###">影视</a>
                                    <i></i>
                                </li>
                                <li>
                                    <a href="###">手工艺</a>
                                    <i></i>
                                </li>
                                <li>
                                    <a href="###">纯艺术</a>
                                    <i></i>
                                </li>
                                <li>
                                    <a href="###">服装</a>
                                    <i></i>
                                </li>
                                <li>
                                    <a href="###">其他</a>
                                </li>
                            </ul>
                            <p>
                                <a href="###">精选作品</a>
                                <a href="###">精选文章</a>
                                <a href="###">精选收藏</a>
                            </p>
                        </div>
                    </li>
                    <li>
                        <a href="###">职位</a>
                    </li>
                    <li>
                        <a href="###">活动</a>
                    </li>
                    <li>
                        <a href="###">正版素材</a>
                    </li>
                    <li>
                        <a href="###">课程</a>
                    </li>
                    <li>
                        <a href="###">版权保护</a>
                    </li>
                    <li>
                        <a href="###">职位</a>
                    </li>
                </ul>
                <ul class="search">
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <img src="https://img.zcool.cn/community/01aa7a5f07cf79a801215aa0904370.jpg@1380w" class="swiper-slide">
                <img src="https://img.zcool.cn/community/018b805f082088a801206621aef87e.jpg@1380w" class="swiper-slide">
                <img src="https://img.zcool.cn/community/01eb1f5f080d13a8012066217b4c3e.png@1380w" class="swiper-slide">
                <img src="https://img.zcool.cn/community/01fb4c5f080d5fa80120662145f89d.png@1380w" class="swiper-slide">
                <img src="https://img.zcool.cn/community/014f055f080ec9a8012066216e2d66.png@1380w" class="swiper-slide">
                <img src="https://img.zcool.cn/community/0101fd5f080f0ba801215aa07720fb.png@1380w" class="swiper-slide">
            </div>
            <!-- 如果需要分页器 -->
            <!-- <div class="swiper-pagination"></div> -->

            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>

            <!-- 如果需要滚动条 -->
            <!-- <div class="swiper-scrollbar"></div> -->
        </div>
        <div id="case">
            <img src="https://reviveimg.hellorf.com/www/images/03c017e48c19cea307ddbecb2066f47d.jpg" alt="">
            <img src="https://reviveimg.hellorf.com/www/images/84bc24fbef27100e7b9cc7ca1fd2b88f.jpeg" alt="">
            <img src="https://reviveimg.hellorf.com/www/images/68ebdb823dca5abd5cca9c4d6e1ac81f.jpg" alt="">
            <img src="https://reviveimg.hellorf.com/www/images/ff07ba28f990592ebaf90bc1744eccaf.jpg" alt="">
            <img src="https://reviveimg.hellorf.com/www/images/372c7cfff9a04ad12ee5942837716471.jpg" alt="">
        </div>
        <div id="recommend">
            <ul>
                <li><a href="###" class="active">首页推荐</a></li>
                <li><a href="###">最新发布</a></li>
            </ul>
        </div>
        <div id="main">
            <div class="output">
                <!-- <div class="list">
                    <img src="https://img.zcool.cn/community/01c3f55f083872a8012066215e1a7d.jpg@260w_195h_1c_1e_1o_100sh.jpg">
                    <div>
                        <p>山田土【裱白】系列茶礼</p>
                        <p>平面-包装</p>
                        <span><i></i>5893</span>
                        <span><i></i>20</span>
                        <span><i></i>200</span>
                    </div>
                    <div>
                        <img src="https://img.zcool.cn/community/04e4c35540adb50000017c50299690.jpg@80w_80h_1c_1e_1o_100sh.jpg">
                        <span>你好大海品牌</span>
                        <span>20小时前</span>
                    </div>
                </div> -->
            </div>
            <div class="paging">
                <button>1</button>
                <button>2</button>
                <button>3</button>
                <button>4</button>
                <button>5</button>
                <button>6</button>
                <button>7</button>
                <button>8</button>
            </div>
            <div class="advertis">
                <img src="https://reviveimg.hellorf.com/www/images/71bd2c125380aea190ef1b886b573984.jpg">
            </div>
            <div class="course">
                <p><span>推荐课程</span><span>换一换</span></p>
                <dl>
                    <dt><img src="https://image.gogoup.com/course/20190805/1565007799507.jpg"></dt>
                    <dd>古风人像摄影</dd>
                </dl>
                <dl>
                    <dt><img src="https://image.gogoup.com/course/20200425/1587796560103.jpg"></dt>
                    <dd>运营插画设计教程</dd>
                </dl>
                <dl>
                    <dt><img src="https://image.gogoup.com/course/20200417/1587111013581.jpg"></dt>
                    <dd>岩彩实用技法教程</dd>
                </dl>
                <dl>
                    <dt><img src="https://image.gogoup.com/course/20180822/1534910653720.jpg"></dt>
                    <dd>PS软件系统教程</dd>
                </dl>
                <dl>
                    <dt><img src="https://image.gogoup.com/course/20200417/1587111110039.jpg"></dt>
                    <dd>InDesign版式设计基础</dd>
                </dl>
            </div>

        </div>
        <div id="footer">

        </div>
        <div id="top1">
            <img src="../images/top.png" alt="">
        </div>
    </div>
    <script src="../js/swiper.min.js"></script>
    <script src="../js/data.js"></script>
    <script>
        /**************轮播图**************/
        var mySwiper = new Swiper('.swiper-container', {
            // autoplay: true,
            direction: 'horizontal', // 垂直切换选项
            loop: true, // 循环模式选项
            autoplay: {
                delay: 2000,//1秒切换一次
                stopOnLastSlide: false,
                disableOnInteraction: false,
            },

            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
            },

            // 如果需要前进后退按钮
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },

            // 如果需要滚动条
            scrollbar: {
                el: '.swiper-scrollbar',
            },
        })

        /***********数据渲染**************/
        
        let output = document.querySelector('.output');
        for (let i = 0; i < data.length; i++) {
            output.innerHTML += `<div class="list">
                            <img src="${data[i].img}">
                            <div>
                                <p>${data[i].title}</p>
                                <p>${data[i].type}</p>
                                <span><i></i>${data[i].liulan}</span>
                                <span><i></i>${data[i].pinlun}</span>
                                <span><i></i>${data[i].zan}</span>
                            </div>
                            <div>
                                <img src="${data[i].small}">
                                <span>${data[i].smalltitle}</span>
                                <span>${data[i].time}</span>
                            </div>
                        </div>`;
        }


        /***********回到顶部按钮吸顶功能**************/
        let top1 = document.getElementById('top1');
        let recommend = document.querySelector('#recommend');
        window.onscroll = () => {
            if (scrollY >= 500) {
                top1.style.display = 'block';
            } else {
                top1.style.display = 'none';
            }

            if (scrollY >= 604) {
                recommend.style.position = 'fixed';
                recommend.style.top = '0px';
            } else {
                recommend.style.position = '';
            }

        }
        top1.onclick = () => {
            window.scrollTo({
                top: 0
            });
        }



    </script>
</body>

</html>